<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="text-center">劳动者选择</view>
        </view>
        <scroll-view
          class="view-box"
          scroll-y
          refresher-enabled
          :lower-threshold="600"
          :refresher-triggered="$data.load"
          refresher-background="#f7f8fa"
          @refresherrefresh="onUp"
        >
          <view>
            <view
              class="gold-worker-item"
              :class="[{ current: item._current }]"
              v-for="(item, index) of $data.list"
              :key="index"
            >
              <view class="gold-worker-item__top">
                <view class="img">
                  <image :src="item._avatar" />
                </view>
                <view class="top-content">
                  <view class="content-row">
                    <view class="name">
                      <view class="text-lg text-bold">{{ item.nickname }}</view>
                      <view class="icon-img">
                        <image :src="ImgIconGoldWorkerYellow" mode="widthFix" />
                      </view>
                    </view>
                    <view class="score">
                      <up-rate
                        :count="5"
                        v-model="item.star"
                        :readonly="true"
                        :size="13"
                        :activeColor="BasicConfig.MainColor"
                      ></up-rate>
                    </view>
                  </view>
                  <view class="text-gray margin-top">
                    <text class="margin-right-sm" v-if="item.expYear">
                      {{ item.expYear }}年经验
                    </text>
                    <text class="margin-right-sm" v-if="item.sales">
                      已接{{ item.sales }}单
                    </text>
                    <text v-if="item.distance"> {{ item.distance }}km </text>
                  </view>
                </view>
              </view>
              <view
                class="middle"
                v-if="item.skillTag && item.skillTag.length > 0"
              >
                <view
                  class="tag"
                  v-for="(tag, tagIndex) of item.skillTag"
                  :key="tagIndex"
                >
                  {{ tag }}
                </view>
              </view>
              <view class="text-gray" v-if="item.recommendWord">
                推荐语： {{ item.recommendWord }}
              </view>
              <view class="bottom">
                <!-- <view class="recommend">
                  <text class="text-gray" v-if="item.recommendWord">
                    推荐语： {{ item.recommendWord }}
                  </text>
                </view> -->
                <view class="recommend">
                  <text v-if="item.isConflict == 1" class="text-red text-df">
                    由于时间冲突当前劳动者无法选择
                  </text>
                </view>
                <view class="common_btn" @tap="onCheckWorker(item)">
                  {{ item.isConflict == 0 ? "选择劳动者" : "修改预约时间" }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import BasicConfig from "@/utils/config";
import { getGoldWorkerList } from "../../api/Interface/worker";
import errorCode from "../../utils/http/errorCode";
import { useImgSrc } from "../../hooks/useImg";
import { ImgIconGoldWorkerYellow } from "../../utils/iconMap";
import { isDev } from "../../utils/env";
const $emit = defineEmits(["update:show", "close", "confirm", "create"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  params: {
    type: Object,
    default: () => null,
  },
  currentWorkerId: {
    type: [Number, String],
    default: () => null,
  },
});
const $data = reactive({
  customStyle: {
    // "border-radius": "60rpx 60rpx 0 0 !important",
    // height: "90vh",
  },
  load: false,
  list: [],
});
const onUp = (e) => {
  console.log("下拉刷新", e);
  $data.load = true;
  fnGetDatas();
};
const init = () => {
  fnGetDatas();
};
const close = () => {
  $emit("update:show", false);
};
const open = () => {
  init();
};
const fnGetDatas = () => {
  getGoldWorkerList($props.params).then((res) => {
    if (res.code === errorCode.success) {
      $data.list = res.data;
      // if (isDev && $data.list.length > 0) {
      //   const devItem = $data.list.find(
      //     (f) => f.workerId == $props.currentWorkerId
      //   );
      //   if (devItem) devItem.isConflict = 1;
      // }
      $data.list.forEach((item) => {
        item._avatar = useImgSrc(item.avatar);
        item._current =
          item.workerId == $props.currentWorkerId && item.isConflict == 0;
      });
      // 找到目标对象的索引
      const index = $data.list.findIndex(
        (item) => item.workerId === $props.currentWorkerId
      );
      if (index !== -1 && index !== 0) {
        $data.list.unshift($data.list.splice(index, 1)[0]);
      }
    }
  });
};
// 选择劳动者
const onCheckWorker = (item) => {
  if (!item) return;
  $emit("confirm", item);
  close();
  // const { isConflict } = item;
  // // 不冲突,直接选择
  // if (isConflict == 0) {
  // }
  // // 冲突,选择日期
  // else {
  // }
};
onMounted(() => {});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 60rpx 60rpx 0 0 !important;
    height: 90vh;
  }
  .content {
    .top {
      height: 8vh;
      padding: 30rpx;
    }
    background: #ffffff;
    height: 100%;
    // padding: 30rpx;
    .view-box {
      height: 80vh;
      background: #f7f8fa;
      padding: 30rpx;
      position: relative;
      .gold-worker-item {
        background: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        &__top {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          .img {
            width: 130rpx;
            height: 130rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx;
            }
          }
          .top-content {
            width: calc(100% - 130rpx);
            padding-left: 30rpx;
            .content-row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .name {
                display: flex;
                align-items: center;
                .icon-img {
                  width: 130rpx;
                  height: 40rpx;
                  margin-left: 30rpx;
                  margin-top: 8rpx;
                  image {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .score {
              }
            }
          }
        }
        .middle {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 20rpx;
          .tag {
            border: 1px solid var(--main-color);
            background: #ffffff;
            color: var(--main-color);
            margin-right: 20rpx;
            border-radius: 100rpx;
            padding: 3rpx 10rpx;
            margin-bottom: 10rpx;
            font-size: 30rpx;
          }
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          .recommend {
            padding-right: 50rpx;
            width: calc(100% - 260rpx);
          }
          .common_btn {
            width: 260rpx;
            padding: 20rpx;
          }
        }
      }
      .current {
        border: 1px solid var(--main-color);
      }
    }
  }
}
</style>
